<template>
  <div>
    <!-- {{ list }} -->
    <ul class="list">
      <li v-for="item in list" :key="item._id">
        <img :src="item.pic" alt="" />
        <p>{{ item.title }}</p>
        <p>价格是:{{ item.price }}</p>
      </li>
      <!-- ：key必须是一个唯一的字符串或者数字  如果有id的话就绑定item.id 没有就用index下标  -->
    </ul>
  </div>
</template>
<script>
import data from "../../public/list.json";
export default {
  data() {
    return {
      list: data.result,
    };
  },
  created() {
    console.log(this.list);
  },
  //实例创建完成
};
</script>
<style lang="scss">
.list {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 48%;
    justify-content: space-between;
    text-align: center;

    img {
      width: 80%;
      height: auto;
    }
  }
}
</style>
